<!--
功能：工作台
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-09-25 09:51:29
-->
<template>
  <div class="page-container">
    <t-row :gutter="10">
      <!-- 个人主页 -->
      <t-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="page-card user-card">
          <div class="user-box">
            <img class="user-avatar" :src="avatar" alt="" srcset="">
            <div class="user-text">
              <div class="user-name text-content">早安，{{ name }}，开始您一天的工作吧！</div>
              <div class="user-desc text-sub">今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</div>
            </div>
          </div>
          <div class="count-box">
            <div class="count-item">
              <div class="count-name text-sub" style="font-size: 14px;">项目数</div>
              <div class="count-number text-content" style="font-size: 24px;">12</div>
            </div>
            <t-divider layout="vertical" />
            <div class="count-item">
              <div class="count-name text-sub" style="font-size: 14px;">审批</div>
              <div class="count-number text-content" style="font-size: 24px;">8</div>
            </div>
            <t-divider layout="vertical" />
            <div class="count-item">
              <div class="count-name text-sub" style="font-size: 14px;">代办项</div>
              <div class="count-number text-content" style="font-size: 24px;">6/18</div>
            </div>
          </div>
        </div>
      </t-col>
      <!-- 项目 -->
      <t-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
        <div class="page-card">
          <div class="card-title">
            <div class="card-title-left">
              <ColorIcon :size="30" icon="fenlei1-mianxing" color="#2d8cf0" />
              <span>项目列表</span>
            </div>
          </div>
          <div class="project-box">
            <t-row :gutter="10">
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project1.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">Admin Plus</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">开箱即用的后台管理系统</div>
                  </div>
                </div>
              </t-col>
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project2.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">TDesgin Admin</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">开箱即用的后台管理系统</div>
                  </div>
                </div>
              </t-col>
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project3.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">TDesgin</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">腾讯开源的桌面端UI组件库
                    </div>
                  </div>
                </div>
              </t-col>
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project4.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">View UI Plus</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">漂亮的开源的桌面端UI组件库
                    </div>
                  </div>
                </div>
              </t-col>
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project1.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">ICRUD</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">面向配置的增删改查表格组件
                    </div>
                  </div>
                </div>
              </t-col>
              <t-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                <div class="project-item">
                  <img src="@/assets/images/project2.png" alt="" srcset="">
                  <div class="project-item-text">
                    <div class="project-item-name text-title" style="font-size: 20px;">Vxe-Table</div>
                    <div class="project-item-desc text-desc" style="font-size: 14px; margin-top: 10px;">功能强大的表格组件</div>
                  </div>
                </div>
              </t-col>
            </t-row>
          </div>
        </div>
      </t-col>
      <!-- 快捷操作 -->
      <t-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="page-card">
          <div class="card-title">
            <div class="card-title-left">
              <ColorIcon :size="30" icon="dianshiji-mianxing" color="#ed4014" />
              <span>快捷操作</span>
            </div>
          </div>
          <div class="fast-box">
            <div class="fast-item" v-for="item in menuList" :key="item">
              <i :class="['fast-icon', 'iconfont', item.icon]" :style="{ color: item.color }"></i>
              <div class="fast-title">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </t-col>
      <!-- 动态 -->
      <t-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="card-title">
            <div class="card-title-left">
              <ColorIcon :size="30" icon="xiaoxileixing-mianxing" color="#19be6b" />
              <span>系统评论</span>
            </div>
          </div>
          <div class="comment-box">
              <t-comment avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" class="comment-item" v-for="item in 8" :key="item" author="评论作者名" datetime="今天16:38"
                content="这里是评论者写的评论内容。">
              </t-comment>
            </div>
        </div>
      </t-col>
      <t-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="card-title">
            <div class="card-title-left">
              <ColorIcon :size="30" icon="xiaoxileixing-mianxing" color="#19be6b" />
              <span>待办事项</span>
            </div>
          </div>
          <div class="comment-box">
              <t-comment avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" class="comment-item" v-for="item in 8" :key="item" author="评论作者名" datetime="今天16:38"
                content="这里是评论者写的评论内容。">
              </t-comment>
            </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
import { computed } from "vue";
import useUserStore from "@/store/modules/user";
// 实例化仓库
const userStore = useUserStore();
// 用户名
const name = computed(() => {
  if (userStore.userInfo) {
    return userStore.userInfo.name;
  } else {
    return "User";
  }
});
// 头像
const avatar = computed(() => {
  if (userStore.userInfo) {
    return userStore.userInfo.avatar;
  } else {
    return "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar";
  }
});
//菜单列表
const menuList = [
  {
    id: 1,
    name: "主控台",
    icon: "choujiang-xianxing",
    color: "#2a95ec",
  },
  {
    id: 2,
    name: "分析页",
    icon: "shuju1-xianxing",
    color: "#19be6b",
  },
  {
    id: 3,
    name: "工作台",
    icon: "diannao-xianxing",
    color: "#ff7306",
  },
  {
    id: 4,
    name: "消息中心",
    icon: "xiaoxi3-xianxing",
    color: "#5e2aec",
  },
  {
    id: 5,
    name: "个人中心",
    icon: "wode2-xianxing",
    color: "#e216d1",
  },
  {
    id: 6,
    name: "系统设置",
    icon: "shezhi-xianxing",
    color: "#1619e2",
  },
  {
    id: 4,
    name: "项目管理",
    icon: "duobianxing-xianxing",
    color: "#59ccd4",
  },
  {
    id: 5,
    name: "客服系统",
    icon: "dianhua3-xianxing",
    color: "#d47c59",
  },
  {
    id: 6,
    name: "地图管理",
    icon: "ditu3-xianxing",
    color: "#d459ca",
  }
];
</script>
<style lang="less" scoped>
.page-card {
  height: auto;
  background-color: #fff;
  box-shadow: 2px 0 6px rgba(36, 36, 36, 0.02);
  border-radius: 4px;
  margin-bottom: 10px;
}

.card-title {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;

  .card-title-left {
    span {
      color: #515a6e;
      font-size: 15px;
      margin-left: 6px;
    }
  }
}

.user-card {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .user-box {
    display: flex;
    align-items: center;

    .user-avatar {
      height: 60px;
      width: 60px;
      border-radius: 50%;
    }

    .user-text {
      margin-left: 15px;

      .user-name {
        font-size: 20px;
        // font-weight: 600;
        margin-top: 4px;
      }

      .user-desc {
        font-size: 14px;
        margin-top: 6px;
      }
    }
  }

  .count-box {
    display: flex;
    align-items: center;

    .count-item {
      padding: 0px 10px;
      text-align: center;
    }

    .count-number {
      margin-top: 6px;
    }
  }
}

.project-box {
  padding: 15px 15px 5px 15px;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  margin-bottom: 10px;

  img {
    width: 100px;
    height: 100px;
  }

  &-text {
    margin-left: 10px;
  }
}

.fast-box {
  padding: 15px;
  height: 305px;
  display: flex;
  flex-wrap: wrap;

  .fast-item {
    width: 33%;
    text-align: center;
    height: 88px;
    padding-top: 15px;
    border-radius: 4px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }

  .fast-icon {
    font-size: 26px;
  }

  .fast-title {
    font-size: 14px;
    color: #515a6e;
    margin-top: 4px;
  }
}
.comment-box{
  padding: 15px 15px 1px 15px;
}
.comment-item{
  margin-bottom: 15px;
}
</style>